<template>
  <view class="setPsw">
    <topTitle :title="$t('editPayPsw.title', { action: userInfoObj.payment_password_set ? $t('editPayPsw.modify') : $t('editPayPsw.set') })" />
    <view class="ipt com">
      <view v-if="userInfoObj.payment_password_set">
        <view>{{ $t('editPayPsw.old_payment_password') }}</view>
        <up-input 
          :placeholder="$t('editPayPsw.placeholder_old_payment_password')" 
          maxlength="6" 
          v-number-only 
          v-model="old_pass_word" 
          clearable 
          :password="eye" 
          class="item" 
          border="none"
        >
          <template #suffix>
            <i @click="eye = !eye" :class="eye ? 'hideEye' : 'showEye'"></i>
          </template>
        </up-input>
      </view>
      <view>
        <view>{{ $t('editPayPsw.new_payment_password') }}</view>
        <up-input 
          :placeholder="$t('editPayPsw.placeholder_new_payment_password')" 
          maxlength="6" 
          v-number-only 
          v-model="pass_word" 
          clearable 
          :password="eye2" 
          class="item" 
          border="none"
        >
          <template #suffix>
            <i @click="eye2 = !eye2" :class="eye2 ? 'hideEye' : 'showEye'"></i>
          </template>
        </up-input>
      </view>
      <view>
        <view>{{ $t('editPayPsw.confirm_new_payment_password') }}</view>
        <up-input 
          :placeholder="$t('editPayPsw.placeholder_confirm_new_payment_password')" 
          maxlength="6" 
          v-number-only 
          v-model="pass_word2" 
          clearable 
          :password="eye3" 
          class="item" 
          border="none"
        >
          <template #suffix>
            <i @click="eye3 = !eye3" :class="eye3 ? 'hideEye' : 'showEye'"></i>
          </template>
        </up-input>
      </view>
    </view>
    <up-button class="btn" :text="$t('editPayPsw.save')" @click="PaymentPwSetFn"></up-button>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
const instance = getCurrentInstance()?.appContext.config.globalProperties;
let eye = ref<boolean>(true)
let eye2 = ref<boolean>(true)
let eye3 = ref<boolean>(true)
import { onShow } from "@dcloudio/uni-app";
import { PaymentPwUpdate, PaymentPwSet, UserInfo } from "@/api/UserApi";

let userInfoObj = ref<any>({})
onShow(() => {
  userInfoObj.value = uni.getStorageSync('userInfo')
});

let old_pass_word = ref<any>()
let pass_word = ref<string>()
let pass_word2 = ref<string>()
const PaymentPwSetFn = async () => {
  let payment_password_set = userInfoObj.value.payment_password_set
  if (!old_pass_word.value && payment_password_set) {
    uni.showToast({ title: instance?.$t('editPayPsw.error_old_payment_password'), icon: "none" });
    return
  }
  if (!pass_word.value) {
    uni.showToast({ title: instance?.$t('editPayPsw.error_new_payment_password'), icon: "none" });
    return
  }
  if (!pass_word2.value) {
    uni.showToast({ title: instance?.$t('editPayPsw.error_confirm_payment_password'), icon: "none" });
    return
  }

  if (pass_word.value != pass_word2.value) {
    uni.showToast({ title: instance?.$t('editPayPsw.error_password_mismatch'), icon: "none" });
    return;
  }
  if (payment_password_set) {
    await PaymentPwUpdate({
      payment_password: instance?.getRsaCode(old_pass_word.value),
      new_payment_password: instance?.getRsaCode(pass_word.value)
    })
  } else {
    await PaymentPwSet({
      payment_password: instance?.getRsaCode(pass_word.value)
    })
  }
  await UserInfo()
  instance?.goBack(1, payment_password_set ? instance?.$t('editPayPsw.success_password_update') : instance?.$t('editPayPsw.success_password_set'))
}
</script>

<style scoped lang="scss">
@import "../../static/scss/setUp.scss";
</style>
